<template>
	<div class="AdminLogin">
		<Card style="width:100%">
			<p slot="title">
				<Icon type="logo-android" size="25"/>
				管理员登录
			</p>
			<Form ref="formInline" :model="formInline" :rules="ruleInline" :label-width="50">
				<FormItem prop="account" label="账号">
					<Input type="text" v-model="formInline.account">
						<Icon type="ios-person-outline" slot="prepend"></Icon>
					</Input>
				</FormItem>
				<FormItem prop="password" label="密码">
					<Input type="password" v-model="formInline.password">
						<Icon type="ios-lock-outline" slot="prepend"></Icon>
					</Input>
				</FormItem>
				<Row>
					<Col :offset="20">
						<Button type="primary" @click="Submit('formInline')">登录</Button>
					</Col>
				</Row>
			</Form>
		</Card>

	</div>
</template>

<script>
	import axios from 'axios'
	export default {
		data() {
			return {
				formInline: {
					account: '',
					password: ''
				},
				ruleInline: {
					account: [
						{required: true, message: '请输入账号', trigger: 'blur'}
					],
					password: [
						{required: true, message: '请输入密码', trigger: 'blur'},
					]
				}
			}
		},
		methods: {
			Submit(name) {
				 this.$refs[name].validate(async (valid) => {
					if (valid) {
						let data = await this.$axios.post('/root/RootLogin',this.formInline).then(r => r.data)
						console.log(data);
						if (data.status){
							await this.$router.push('/admin/home');
						} else {
							this.$Message.error(data.msg);
						}
					} else {
						this.$Message.error('请正常输入!');
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.AdminLogin {
		width: 400px;
		margin: auto;
		padding-top: 100px ;
	}
</style>